<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="./css/normalize.css" />
    <link rel="stylesheet" href="./css/bootstrap.css">

    <style>
        body {
            width: 100vw;
            height: 100vh;
            background-color: #d7eded;
            background-size: cover;
        }

        .title {
            color: #FFFFFF;
            position: absolute;
            top: 10%;
            left: 5%;
            transform: translate(0, -50%);
        }

        .background {
            position: absolute;
            top: 50%;
            left: 10%;
            transform: translate(0, -50%);
        }

        .login {
            width: 30%;
            background: #F8F8F8;
            box-shadow: 2px 4px 10px -4px rgba(0, 0, 0, 0.25);
            border-radius: 6px;
            padding: 2%;
            position: absolute;
            top: 50%;
            left: 60%;
            transform: translate(0, -50%);
        }

        .userLogin {
            color: #10435d;
            font-size: 2em;
        }

        .userRegister {
            color: #B2B2B2;
            font-size: 2em;
            margin-left: 20px;
        }

        .edit {
            height: 50px;
            margin-top: 15px;
        }

        .edit-verify {
            width: 200px;
        }

        .btn-login {
            width: 100%;
            border-radius: 12px;
            color: white;
            height: 5%;
            margin-top: 8%;
        }

        a {
            text-decoration: none;
            color: #CCCCCC;
        }

        a:hover {
            color: #D26F44;
            text-decoration: none;
        }
    </style>

</head>
<body>
<div class="title">
    <h1>独角兽购物商城</h1>
</div>
<div class="background">
    <img src="img/background.png" style="width: 70%;">
</div>
<div class="login">
    <span class="userLogin">注册</span>
    <span class="userRegister"><a href="login.jsp">登录</a></span>

    <form action="/register" method="post" onsubmit="return checkSubmit()">
        <input type="text" id="tuId" name="tuId" class="form-control edit" placeholder="用户名"
               aria-describedby="basic-addon1" onblur="nameBlur()" onfocus="nameFocus()">
        <span id="errName" style="color: red;display: none"></span>
        <input type="password" id="password" name="password" class="form-control edit" placeholder="密码"
               aria-describedby="basic-addon1" onblur="pswBlur()" onfocus="pwdFocus()">
        <span id="errPwd" style="color: red;display: none"></span>
        <input type="password" id="okpassword" name="okpassword" class="form-control edit" placeholder="确认密码"
               aria-describedby="basic-addon1" onblur="okpswBlur()" onfocus="okpswFocus()">
        <span id="errOkPwd" style="color: red;display: none"></span>
        <button type="submit" class="btn btn-primary btn-login">注册</button>
    </form>


</div>

<script type="text/javascript">
     //用户失去焦点校验 只能输入数字和字母
    function nameBlur(){
        //获取name文本框的值
        var name = document.getElementById("tuId").value;
        var errName=document.getElementById("errName");
        //输出到控制台
        console.log(name);
        // 使用正则表达式校验 文本框的输入合理性 只能输入大小写字母和数字
        var reg=/[A-Za-z0-9]+$/;
        //使用正则表达式校验 name值  name.trim() 去掉两边空格
        var result=reg.test(name.trim());
        //判断校验结果， 成功隐藏错误提示， 失败显示错误提示
        if(name!=null&&result){
            errName.style.display="none";
            return true;
        }else{
            errName.innerText="请输入正确的用户名";
            errName.style.display="";
            return false;
        }

    }
    //用户名文本框获取焦点， 隐藏错误信息
    function nameFocus(){
        var errName=document.getElementById("errName");
        errName.style.display="none";
    }
     //密码框失去焦点校验 只能输入数字和字母
     function pswBlur(){
         //获取password文本框的值
         var password = document.getElementById("password").value;
         var errPwd=document.getElementById("errPwd");
         //输出到控制台
         console.log(password);
         // 使用正则表达式校验 (6-12位字母、数字或字符,至少包含两种)
         var reg=/(?!\d+$)(?!^[a-zA-Z]+$)(?!^[_#@]+$).{6,12}/
         //使用正则表达式校验 password
         var result=reg.test(password.trim());
         //判断校验结果， 成功隐藏错误提示， 失败显示错误提示
         if(password!=null&&result){
             errPwd.style.display="none";
             return true;

         }else{
             errPwd.innerText="请输入正确的密码";
             errPwd.style.display="";
             return false;
         }

     }
     //密码框获取焦点， 隐藏错误信息
     function pwdFocus(){
         var errPwd=document.getElementById("errPwd");
         errPwd.style.display="none";
     }
     //再次密码确认， 判断跟上次密码输入是否一致
    function okpswBlur(){
        //第一个密码框
        var pwd=document.getElementById("password").value;
        var okpwd=document.getElementById("okpassword").value;
        var errOkPwd=document.getElementById("errOkPwd");
        if(pwd==okpwd){
            errOkPwd.style.display="none";
            return true;
        }else{
            errOkPwd.innerText="两次输入的密码不一致，请重试";
            errOkPwd.style.display="";
            return false;
        }
    }
    function okpswFocus(){
        var errOkPwd=document.getElementById("errOkPwd");
        errOkPwd.style.display="none";
    }

     //校验提交， 如果有账号密码邮箱校验失败，表单不能提交
     function checkSubmit(){
        //默认表单可以提交
         var flag=true;
         //验证用户名
         flag=nameBlur();
         if(flag){
             //用户名验证通过， 验证密码
             flag=pswBlur();
         }
         if(flag){
             //用户名 密码验证通过 验证再次确认密码
             flag=okpswBlur();
         }

         return flag;
     }
</script>
</body>
</html>

